import './MaterialTransportation.scss'
import { useEffect, useRef } from 'react'
import { useRequest, useSize } from 'ahooks'

import { TitleSmall001 } from '../Common/SmallTitle'

import { WebCommonUrl } from '../../../../Common/Configure/CommonParameter'

import { ColumnStyle, ColumnConfigA01Template, BarStyle, BarConfigA01Template } from './AssetsCharts'
import { useState } from 'react'
import { Http } from '../../../../Common/Api'
const styleA02 = {
    ColumnColor:
        'l(180) 0:rgba(155, 253, 255, 1) 1:rgba(155, 253, 255, 0.2)&l(180) 0:rgba(255, 218, 138, 1) 1:rgba(255, 218, 138, 0.4)&l(180) 0:rgba(199, 255, 239, 1) 1:rgba(199, 255, 239, 0.4)&l(90) 0:rgba(152, 179, 255, 1) 1:rgba(152, 179, 255, 0.4)&l(90) 0:rgba(0, 133, 88, 1) 1:rgba(0, 133, 88, 0.4)',
    ColumnWidth: 16,
    ColumnLegend: true,
    LegendPossion: 'top-right',
    LegendoffsetY: 10,
    Legendfill: '#B2FBFD',
    LegendfontSize: 12,
    XLine: '#B2FBFD',
    XLabel: '#B2FBFD',
    XTick: '#B2FBFD',
    YTitle: '',
    YTColor: '#B2FBFD',
    YPosi: 'end',
    YAuto: true,
    YOffset: 50,
    YColoc: '#B2FBFD',
    YNumber: 5,
    YGrid: 'rgba(155, 253, 255, 0.35)',
    BarStatus: false,
    BarHeight: 8,
    BarWidth: 80,
    BarTrack: 'rgba(178, 251, 253, 0.2)',
    BarThumb: 'rgba(178, 251, 253, 1)',
    BarHover: '#367EF2',
    isStack: true,
    isGroup: true,
}

const topList = [
    { uuid: 1, title: '总金额', value: 'totalMoney', unit: '万元', img: 'MaterialTransportationA01_A01.png' },
    { uuid: 2, title: '已结金额', value: 'settleMoney', unit: '万元', img: 'MaterialTransportationA01_A02.png' },
    { uuid: 3, title: '承运单位', value: 'carrierCount', unit: '个', img: 'MaterialTransportationA01_A03.png' },
    { uuid: 4, title: '累计进场', value: 'accumulativeCar', unit: '台', img: 'MaterialTransportationA01_A04.png' },
    { uuid: 5, title: '当前在场', value: 'nowCar', unit: '台', img: 'MaterialTransportationA01_A05.png' },
]

export const MaterialTransportationA01 = ({ OrgEvent, DateEvent, date }) => {
    const ChartsA01 = useRef()
    const ChartsA02 = useRef()
    const ChartsA03 = useRef()

    const sizeA01 = useSize(ChartsA01)
    const sizeA02 = useSize(ChartsA02)
    const sizeA03 = useSize(ChartsA03)

    const [Org, setOrg] = useState('')
    const [Date, setDate] = useState(date)

    OrgEvent.useSubscription(val => setOrg(val === '00000000-0000-0000-0000-000000000000' ? '' : val))
    DateEvent.useSubscription(val => setDate(val))

    const [DataA01, setDataA01] = useState({
        totalMoney: 0,
        settleMoney: 0,
        carrierCount: 0,
        accumulativeCar: 0,
        nowCar: 0,
    })
    const [ChartDataA01, setChartDataA01] = useState([])
    const [ChartDataA02, setChartDataA02] = useState([])
    const [ChartDataA03, setChartDataA03] = useState([])

    const { runAsync } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            setDataA01(res.list[0])
            setChartDataA01(
                res.list2.flatMap(({ yS_CaiLiaoName, totalMoney, settleMoney }) => [
                    { name: '总额', type: yS_CaiLiaoName, value: totalMoney },
                    { name: '已结', type: yS_CaiLiaoName, value: settleMoney },
                ]),
            )
            setChartDataA02(
                res.list3.map(({ yS_CaiLiaoName, yS_ShouLiaoShuLiang }) => ({
                    name: '数量',
                    type: yS_CaiLiaoName,
                    value: yS_ShouLiaoShuLiang,
                })),
            )
            setChartDataA03(
                res.list1.flatMap(({ yS_YunShuFang, totalMoney, settleMoney }) => [
                    { name: '总额', type: yS_YunShuFang, value: totalMoney },
                    { name: '已结', type: yS_YunShuFang, value: settleMoney },
                ]),
            )
        },
    })
    useEffect(() => {
        if (Date) {
            const [DateB, DataE] = Date
            runAsync({
                url: 'getNongkenCaiLiaoList',
                data: {
                    OrganizationUuid: Org,
                    BeginSecurityDate: DateB.format('YYYY-MM-DD'),
                    EndSecurityDate: DataE.format('YYYY-MM-DD'),
                },
            })
        }
    }, [runAsync, Org, Date])

    return (
        <div className="MaterialTransportationA01">
            <div className="Right">
                <div className="Top">
                    {topList.map(({ uuid, title, value, unit, img }) => (
                        <div key={uuid}>
                            <div>
                                <img src={WebCommonUrl + 'MaterialTransportationA01_BTM.png'} alt="" />
                                <img src={WebCommonUrl + img} alt="" />
                            </div>
                            <div>
                                <div>{title}</div>
                                <div>
                                    <div>
                                        {DataA01[value]}
                                        <img src={WebCommonUrl + 'MaterialTransportationA01_Num.png'} alt="" />
                                    </div>
                                    <div>{unit}</div>
                                </div>
                            </div>
                        </div>
                    ))}
                </div>
                <div className="Btm">
                    <div className="left">
                        <div className="top">
                            <TitleSmall001 title="材料运费汇总" />
                            <div className="Charts" ref={ChartsA01}>
                                {sizeA01 && (
                                    <ColumnConfigA01Template
                                        data={ChartDataA01}
                                        size={sizeA01}
                                        style={{ ...ColumnStyle, isStack: true, isGroup: false }}
                                    />
                                )}
                            </div>
                        </div>
                        <div className="btm">
                            <TitleSmall001 title="材料运输情况" />
                            <div className="Charts" ref={ChartsA02}>
                                {sizeA02 && (
                                    <ColumnConfigA01Template
                                        data={ChartDataA02}
                                        size={sizeA02}
                                        style={{ ...ColumnStyle, isStack: true, isGroup: false }}
                                    />
                                )}
                            </div>
                        </div>
                    </div>
                    <div className="right">
                        <TitleSmall001 title="承运单位情况" />
                        <div className="Charts" ref={ChartsA03}>
                            {sizeA03 && <BarConfigA01Template size={sizeA03} data={ChartDataA03} style={BarStyle} />}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}
